<template>
  <div class="event-config">
    <el-form size="mini" class="customForm" label-width="90px">
      <el-collapse value="1" class="customer-collapse">
        <el-collapse-item name="1" title="组件交互">
          <el-form-item label="触发条件">
            <el-checkbox v-model="interaction.active">{{interaction.eventText || '点击'}}</el-checkbox>
          </el-form-item>

          <interaction-table v-if="option.cptKey === 'scroll-table'" @change="changeInteractionData" :options="option.cptOption"/>
          <interaction-tab v-if="option.cptKey === 'widget-tab'" @change="changeInteractionData" :options="option"/>

          <el-form-item label="交互类型">
            <tm-select v-model="interaction.intType" :data="intTypes"></tm-select>
          </el-form-item>

          <!-- 隐藏显示 -->
          <el-form-item label="选择对象" v-if="interaction.intType === 'display'">
            <div class="comp-multiple">
              <el-tabs v-model="tabName">
                <el-tab-pane label="显示" name="show">
                  <div class="comp-multiple-wrap">
                    <el-checkbox-group class="block-checkbox" v-model="interactionData.show">
                      <el-checkbox v-for="item in componentList" :key="item.value" :label="item.value" :disabled="interactionData.hidden.includes(item.value)">{{item.label}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="隐藏" name="hidden">
                  <div class="comp-multiple-wrap">
                    <el-checkbox-group class="block-checkbox" v-model="interactionData.hidden">
                      <el-checkbox v-for="item in componentList" :key="item.value" :label="item.value" :disabled="interactionData.show.includes(item.value)">{{item.label}}</el-checkbox>
                    </el-checkbox-group>
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-form-item>

          <!-- 更新API -->
          <template v-if="interaction.intType === 'api'">
            <el-form-item label="选择对象" >
              <div class="comp-multiple">
                <div class="comp-multiple-wrap">
                  <el-checkbox-group class="block-checkbox" v-model="interactionData.changeDataset">
                    <el-checkbox v-for="item in componentList" :key="item.value" :label="item.value" >{{item.label}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="参数名">
              <el-input v-model="interactionData.paramName" placeholder="请输入参数名"/>
            </el-form-item>
            <el-form-item label="参数值">
              <el-radio-group v-model="interactionData.paramType" @change="interactionData.paramValue = ''">
                <el-tooltip content="获取当前组件的value值">
                  <el-radio-button label="auto">自动获取</el-radio-button>
                </el-tooltip>
                <el-tooltip content="手动输入固定值">
                  <el-radio-button label="input">固定值</el-radio-button>
                </el-tooltip>
                <el-tooltip content="全局变量">
                  <el-radio-button label="const">全局变量</el-radio-button>
                </el-tooltip>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="interactionData.paramType === 'input'">
              <el-input v-model="interactionData.paramValue" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item v-if="interactionData.paramType === 'const'">
              <tm-const-list v-model="interactionData.paramValue" :constants="constants"/>
            </el-form-item>
          </template>


          <!-- 下钻大屏 @todo 当前用户大屏选择器 -->
          <el-form-item label="选择大屏" v-if="interaction.intType === 'drill'"> </el-form-item>

          <template v-if="interaction.intType === 'redirect'">
            <el-form-item label="跳转链接" >
              <el-input type="textarea" v-model="interactionData.redirectUrl" placeholder="请输入跳转链接"/>
            </el-form-item>
            <el-form-item label="跳转方式">
              <el-radio-group v-model="interactionData.redirectType">
                <el-radio-button label="_self">本窗口</el-radio-button>
                <el-radio-button label="_blank">新窗口</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </template>

        </el-collapse-item>
      </el-collapse>
    </el-form>
  </div>
</template>

<script>
import tmSelect from "@/package/components/tm-select";
import tmConstList from '@/package/components/tm-const-list'
import interactionTable from './components/interaction/interaction-table'
import interactionTab from './components/interaction/interaction-tab'

export default {
  name: 'interaction-config',
  cnName: '交互配置',
  components: {
    tmSelect,
    tmConstList,
    interactionTable,
    interactionTab
  },
  props: {
    id: String,
    interaction: Object,
    constants: Object,
    option: Object
  },
  inject: ['wrapper'],
  data() {
    return {
      intTypes: [
        {label: '显示/隐藏组件', value: 'display'},
        {label: '更新API数据', value: 'api'},
        {label: '下钻', value: 'drill'},
        {label: '跳转外部链接', value: 'redirect'}
      ],
      interactionData: {
        show: [], // 显示组件
        hidden: [], // 隐藏组件
        changeDataset: [], // 更新api组件
        drillDesignId: '', // 跳转组件id
        redirectUrl: '' // 外部链接地址
      },
      tabName: 'show',
      multiKey: 'default'
    }
  },
  watch: {
    interaction() {
      console.info('watch-interaction')
      this.changeInteractionData()
    }
  },
  created() {
    this.changeInteractionData()
  },
  methods: {
    init() {
    },
    changeInteractionData(key = 'default') {
      this.multiKey = key
      if(!this.interaction.objMap[this.multiKey]) {
        this.interaction.objMap[this.multiKey] = {
          show: [], // 显示组件
          hidden: [], // 隐藏组件
          changeDataset: [], // 更新api组件
          drillDesignId: '', // 跳转组件id
          redirectUrl: '' // 外部链接地址
        }
      }
      this.interactionData = this.interaction.objMap[this.multiKey]
    }
  },
  computed: {
    componentList() {
      return this.wrapper.cacheComponents.map(o => {
        return {label: o.cptTitle, value: o.id}
      })
    }
  },
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.event-config {
  height: 100%;

  .comp-multiple {
    border: 1px solid var(--bd-color);
    padding: 10px;
    box-sizing: border-box;

    &-wrap {
      max-height: 400px;
      overflow-y: auto;
    }
  }

  .block-checkbox {
    /deep/ .el-checkbox{
      display: block;
    }
  }
}
</style>
